<!DOCTYPE HTML>
<html>
<head>
<title>My WebSocket</title>
</head>

<body>
    <input id="text" type="text" />
    <button onclick="send()">Send</button>
    <button onclick="closeWebSocket()">Close</button>
    <div id="message"></div>
</body>

<script type="text/javascript">
          var lockReconnect = false;//避免重复连接
            var wsUrl =  "ws://127.0.0.1:8080/websocket/{aaaa}";
            var ws;
            createWebSocket();
            function createWebSocket() {
                try {
                    ws = new WebSocket(wsUrl);
                    init();
                } catch(e) {
                    alert("it error");
                    console.log('catch'+e);
                    reconnect(wsUrl);
                }
            }
 
            function init() {
 
                ws.onclose = function () {
                    console.log('链接关闭');
                    reconnect(wsUrl);
                };
                ws.onerror = function() {
                    console.log('发生异常了');
                    reconnect(wsUrl);
                };
                ws.onopen = function () {
                    console.log('建立连接');
                    ws.send(JSON.stringify({"doWhat":"getLink"}));
                    //心跳检测重置
                    heartCheck.start();
                };
                ws.onmessage = function (event) {
                    console.log('接收到消息'+event.data);
                    heartCheck.start();
                    //拿到任何消息都说明当前连接是正常的
                }
            }
 
            var lockReconnect = false;//避免重复连接
            function reconnect(url) {
                if(lockReconnect) {
                    return;
                };
                lockReconnect = true;
                //没连接上会一直重连，设置延迟避免请求过多
                tt && clearTimeout(tt);
                tt = setTimeout(function () {
                    createWebSocket(url);
                    lockReconnect = false;
                }, 40000);
            }
            //心跳检测
            var heartCheck = {
                timeout: 60000,
                timeoutObj: null,
                serverTimeoutObj: null,
                start: function(){
                    console.log('start');
                    var self = this;
                    this.timeoutObj && clearTimeout(this.timeoutObj);
                    this.serverTimeoutObj && clearTimeout(this.serverTimeoutObj);
                    this.timeoutObj = setTimeout(function(){
                        //这里发送一个心跳，后端收到后，返回一个心跳消息，
                        //onmessage拿到返回的心跳就说明连接正常
                        console.log('55555');
                        ws.send(JSON.stringify({"doWhat":"testLink"}));
                        self.serverTimeoutObj = setTimeout(function() {
                            console.log(111);
                            console.log(ws);
                            ws.close();
                            // createWebSocket();
                        }, self.timeout);
                    }, this.timeout)
                }
            }
</script>
</html>